<template>
  <view class="switcher-container">
    <!-- 导航栏区域 -->
    <view class="switcher-header">
      <view
        v-for="(page, index) in pages"
        :key="index"
        class="switcher-item"
        @tap="switchPage(index)"
      >
        <!-- 页面文字 -->
        <text
          class="switcher-text"
          :class="{ active: currentIndex === index }"
          :style="{
            color: textColors[index],
            transition: 'color 0.3s ease'
          }"
        >
          {{ page }}
        </text>
      </view>

      <!-- 滑动方块 -->
      <view
        class="switcher-block"
        :style="{
          width: blockWidth + 'px',
          transform: `translateX(${blockOffset}px)`
        }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    pages: {
      type: Array,
      required: true, // 接收页面名字数组
    },
  },
  data() {
    return {
      currentIndex: 0,      // 当前选中的页面索引
      blockWidth: 0,        // 滑动方块的宽度
      blockOffset: 0,       // 滑动方块的偏移量
      textColors: [],       // 用来保存每个文字的颜色
    };
  },
  mounted() {
    this.calculateBlock();
    this.initializeTextColors();
  },
  methods: {
    // 切换页面
    switchPage(index) {
      this.currentIndex = index;
      this.calculateBlock();
	  this.$emit("changeIndex",this.currentIndex)
    },
    // 计算方块的宽度和位置
    calculateBlock() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.selectAll('.switcher-item').boundingClientRect(data => {
          if (data && data.length > 0) {
            const currentItem = data[this.currentIndex];
            if (currentItem) {
              this.blockWidth = currentItem.width; // 方块宽度等于当前项宽度
              this.blockOffset = currentItem.left - data[0].left; // 基于第一个元素计算偏移量
              this.updateTextColors(data); // 更新文字颜色
            }
          }
        }).exec();
      });
    },
    // 初始化文字颜色
    initializeTextColors() {
      this.textColors = this.pages.map((_, index) => {
        return '#333'; // 默认所有文字为黑色
      });
    },
    // 更新文字颜色：当方块经过某个文字时，文字变为橙色
    updateTextColors(data) {
      this.pages.forEach((_, index) => {
        const currentItem = data[index];
        if (currentItem) {
          const blockLeft = this.blockOffset;
          const blockRight = blockLeft + this.blockWidth;
        }
      });
    },
  },
};
</script>

<style scoped>
	.switcher-container {
	  display: flex;
	  flex-direction: column;
	  background-color: #f5f5f5;
	  border-bottom: 1px solid #e0e0e0;
	}
	
	/* 导航栏 */
	.switcher-header {
	  display: flex;
	  position: relative;
	  background-color: #ffffff;
	  padding: 10px 0;
	  overflow: hidden; /* 确保滑动方块不超出 */
	}
	
	.switcher-item {
	  flex: 1;
	  text-align: center;
	  font-size: 16px;
	  font-weight: bold;
	  color: #333;
	  position: relative;
	  z-index: 2;
	}
	
	/* 文字样式 */
	.switcher-text {
	  line-height: 30px; /* 与方块高度一致 */
	  display: inline-block;
	  position: relative;
	  z-index: 3; /* 保证文字在最上层 */
	  color: #333;
	}
	/* 滑动方块 */
	.switcher-block {
	  position: absolute;
	  margin: auto;
	  height: 30px;
	  background: linear-gradient(135deg, #d0e1f9, #a3c6f7); /* 添加渐变色 */
	  border-radius: 8px;
	  transition: transform 0.2s ease, width 0.2s ease;
	  z-index: 1; /* 位于文字下面 */
	}
</style>
